<template>
  <div style="margin: 30px 100px">
      <p style="font-size: xx-large">个人信息</p>
    <el-card>
      <el-col :offset="4">
<!--    <div v-for="o in 4" :key="o" class="text item">-->
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple">员工用户名: </div></el-col>
          <el-col :span="10"><input class="addBySHowi grid-content bg-purple-light" v-model="staff.sUsername"></input></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple">员工名: </div></el-col>
          <el-col :span="10"><input class="addBySHowi grid-content bg-purple-light" v-model="staff.sName"></input></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple">员工id: </div></el-col>
          <el-col :span="10"><input class="addBySHowi grid-content bg-purple-light" v-model="staff.sId" disabled=""></input></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple">员工类型: </div></el-col>
          <el-col :span="10"><input class="addBySHowi grid-content bg-purple-light"v-model="staff.sType" disabled=""> </input></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple">员工性别: </div></el-col>
          <el-col :span="10"><input class="addBySHowi grid-content bg-purple-light" v-model="staff.sSex"></input></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple">员工身份证号: </div></el-col>
          <el-col :span="10"><input class="addBySHowi grid-content bg-purple-light" v-model="staff.sIdNumber"></input></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple">员工地址: </div></el-col>
          <el-col :span="10"><input class="addBySHowi grid-content bg-purple-light" v-model="staff.sAddress"></input></el-col>
        </el-row>
        <el-row>
      <el-col :span="6"><div class="grid-content bg-purple">员工联系方式: </div></el-col>
      <el-col :span="10"><input class="addBySHowi grid-content bg-purple-light" v-model="staff.sTel"></input></el-col>
    </el-row>
      </el-col>
      <el-button @click="updateInfo" type="success" plain>保存修改</el-button>
    </el-card>
<!--      <div slot="header" class="clearfix">员工类型: {{staff.sType}}</div>-->
<!--      <div slot="header" class="clearfix">员工性别: {{staff.sSex}}</div>-->
<!--      <div slot="header" class="clearfix">员工身份证号: {{staff.sIdNumber}}</div>-->
<!--      <div slot="header" class="clearfix">员工地址: {{staff.sAddress}}</div>-->
<!--      <div slot="header" class="clearfix">员工联系方式:{{staff.sTel}}</div>-->
</div>
</template>

<script>
  import Global from "../../utils/global.js"
  export default {
    name: 'SelfInfo',
    data(){
      return{
        glo:new Global,
        staff:[],
        glo:new Global
        //   {
        //   sName:' ',
        //   sId:' ',
        //   sType:' ',
        //   sSex:' ',
        //   sIdNumber:' ',
        //   sAddress:' ',
        //   sTel:' ',
        //   sUsername:' ',
        // },

      }
    },
    props:["items"],
    methods: {
    updateInfo(){
      let vue = this
      var temp = this.staff.sType
      this.staff.sType = this.staffStype
      // this.staff.
      this.glo.sendDate(this.glo.server+'staff/updateInfo',this.staff,(x)=>vue.$message(x),"POST");
      this.glo.storeData('StaffInfo',this.staff)//将staff 的信息存储到session中
      // console.log(this.staff.sUsername)
      this.glo.storeData('name',this.staff.sUsername)
      this.staff.sType = temp
    }
    },
    created () {
      // this.$message(this.$route.query.username);
      // console.log(this.sideList);
      this.staff = this.glo.getData("StaffInfo")
            console.log(this.staff,'s')
      console.log("this.staff:"+this.staff)

      // this.staff.sName = this.items.sName;
      // this.staff.sId = this.items.sId;
      // this.staff.sType = this.items.sType;
      // this.staff.sSex = this.items.sSex;
      // this.staff.sIdNumber = this.items.sIdNumber;
      // this.staff.sAddress = this.items.sAddress;
      // this.staff.sTel = this.items.sTel;
      // this.staff.sUsername = this.items.sUsername;
      console.log(this.items.sName+": sName");
      this.staffStype = this.staff.sType
      if(this.staff.sType == 1){
        this.staff.sType = "模型主管";
      }else if(this.staff.sType == 2){
        this.staff.sType = "渲染主管";
      }else if(this.staff.sType == 3) {
        this.staff.sType = "后期主管";
      }else if(this.staff.sType == 4){
        this.staff.sType = "模型生手";
      }else if(this.staff.sType == 5){
        this.staff.sType = "渲染生手";
      }else if(this.staff.sType == 6){
        this.staff.sType = "后期生手";
      }else if(this.staff.sType == 7){
        this.staff.sType = "模型熟手";
      }else if(this.staff.sType == 8){
        this.staff.sType = "渲染熟手";
      }else if(this.staff.sType == 9){
        this.staff.sType = "后期熟手";
      }else if(this.staff.sType == 10){
        this.staff.sType = "前台人员";
      }else if(this.staff.sType == 11){
        this.staff.sType = "超级管理员";
      }

      if(!this.staff.sSex){
        this.staff.sSex = '未填写'
      }
      if(!this.staff.sAddress){
        this.staff.sAddress = '未填写'
      }
    }
  }

</script>


<style scoped>
  .el-row {
    margin-bottom: 20px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .bg-purple {
    /*background: #d3dce6;*/
    background: #c2c2c8
  }
  .bg-purple-light {
    /*background: #e5e9f2;*/
    background: rgba(238, 238, 238, 0);
  }
  .addBySHowi{
    border:0px;
  }
</style>
